<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:ic="http://ivyteam.ch/jsf/component"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:pm="http://primefaces.org/mobile">


	<head>
	    <style>
	    /* prefix? radius = y, grad = n */

			body {
			padding: 0;
			margin: 0;
			text-align: center;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 13px;
			line-height: 20px;
			}
			
			
			div, ul, li, h1, h2, h3, h4, h5 {
			margin: 0;
			padding: 0;
			}
			
			a {
			text-decoration: none;
			}
			
			h1 {
			font-weight: normal;
			text-align: center;
			}
			
			div.clear {
			clear: both;
			height: 1px;
			line-height: 1px;
			font-size: 1px;
			}
			
			
			#header  { padding: 22px 00px 12px 00px; }
			#top     { padding: 30px 00px 00px 00px; }
			#content { padding: 50px 00px 30px 00px; }
			#footer  { padding: 20px 00px 40px 00px; }
			
			
			/* ***************************
			       Layout
			**************************** */
			
			.wrapper {
			text-align: left;
			margin: 0 auto;
			}
			
			#content {
			position: relative;
			}
			
			#container, #header {
			/*width: 1040px;*/
			margin: 0 auto;
			}
			
			#footer {
			width: 100%;
			}
			#footer .wrapper {
			width: 100%;
			white-space:nowrap;
			}
			
			
			body {
			background: #fff;
			}
			#container {
			}
			#top {
			}
			#content { }
			#footer { }
			
			/* ***************************
			       Content
			**************************** */
			
			#content {
			color: #515348;
			height: 1%;
			}
			
			#content a {
			color: #36808e;
			border-bottom: 1px solid #d0e8e7;
			}
			
			
			
			/* ***************************
			       Footer
			**************************** */
			
			
			
			#footer {
			color: #555;
			}
			#footer .wrapper {
			text-align: center;
			}
			#footer p {
			margin-bottom: 20px;
			}
			#footer a {
			color: #555;
			padding: 4px;
			}
			#footer a span {
			border-bottom: 1px solid #ddd;
			}
			#footer a:hover {
			text-decoration: none;
			}
			#footer span.bar {
			padding: 0 6px;
			color: #ccc;
			}
			#footer #copyright {
			color: #888;
			font-size: 11px;
			}
			#footer #copyright a {
			color: #888;
			padding: 0;
			}
			
			
			
			
			
			/* ***************************
			       Small
			**************************** */
			
			body.login #header { width: 420px; }
			body.login #header h1 a { width: 360px; }
			body.login #container { width: 460px; }
			body.login #content .wrapper { width: 380px; }
			
			body.error #header { width: 480px; }
			body.error #header h1 a { width: 420px; }
			body.error #container { width: 520px; }
			body.error #content .wrapper { width: 440px; }
			
			body.forgot #header { width: 420px; }
			body.forgot #header h1 a { width: 360px; }
			body.forgot #container { width: 460px; }
			body.forgot #content .wrapper { width: 380px; }
			
			body.optin #header { width: 420px; }
			body.optin #header h1 a { width: 360px; }
			body.optin #container { width: 460px; }
			body.optin #content .wrapper { width: 380px; }
			
			body.optout #header { width: 420px; }
			body.optout #header h1 a { width: 360px; }
			body.optout #container { width: 460px; }
			body.optout #content .wrapper { width: 380px; }
			
			body.processing #header { width: 420px; }
			body.processing #header h1 a { width: 360px; }
			body.processing #container { width: 460px; }
			body.processing #content .wrapper { width: 380px; }
			
			body.activation #header { width: 420px; }
			body.activation #header h1 a { width: 360px; }
			body.activation #container { width: 460px; }
			body.activation #content .wrapper { width: 380px; }
			
			body.charge #header { width: 420px; }
			body.charge #header h1 a { width: 360px; }
			body.charge #container { width: 460px; }
			body.charge #content .wrapper { width: 380px; }
			
			body.contact #header { width: 460px; }
			body.contact #header h1 a { width: 400px; }
			body.contact #container { width: 500px; }
			body.contact #content .wrapper { width: 420px; }
			
			
			
			body.small #wrapper {
			text-align: left;
			margin: 0 auto;
			}
			body.small #header {
			margin-bottom: 30px;
			padding: 40px 0 0 0;
			border: none;
			background: none;
			}
			body.small #container {
			border-radius: 6px;
			behavior: url(/_pie/PIE.htc);
			}
			body.small #content {
			padding: 25px 30px 20px 30px;
			}
			
			.inputtext {
			width: 240px;
			}
			
			body.small #content h2 {
			font-size: 18px;
			}
			body.small #content a {
			color: #36808e;
			border-bottom: 1px solid #d0e8e7;
			}
			body.small #content a:hover {
			background: #deefee;
			text-decoration: none;
			}
			
			
			body.error #content h2 {
			margin-bottom: 0.5em;
			line-height: 1.5em;
			}
			body.error #content p {
			margin: 0.25em 0;
			}
			body.processing #header {
			display: none;
			}
			body.processing #container {
			margin-top: 80px;
			}
			body.processing #content .wrapper {
			text-align: center !important;
			}
			body.processing #content h2 {
			margin-bottom: 0.6em;
			}
			body.processing #content div.error {
			margin-top: 0;
			}
			body.processing #content img {
			margin: 0 0 0.75em 0;
			}
			body.processing #content p {
			margin: 0.25em 0 1.25em 0;
			}
			
			
			body.activation h2 img {
			margin: 0 !important;
			padding: 0 !important;
			}
			
			table.login {
			margin: 5px auto;
			}
			table.login th {
			padding: 5px 10px 5px 0;
			vertical-align: top;
			text-align: right;
			}
			table.login td {
			}
			.inputtext {
			width: 250px !important;
			color: #515348;
			}
			table.login input.public-button {
			margin: 0;
			}
			table.login select {
			padding: 3px;
			color: #515348;
			}
			table.login tr td.separator {
			padding: 10px 0 10px 0;
			}
			table.login tr td.separator div {
			border-top: 1px dotted #bbb;
			height: 0;
			line-height: 0;
			font-size: 0;
			}
			table.login span.tipinline {
			font-size: 0.9em;
			color: #777;
			}
			
			body.login div.error, body.login div.success {
			margin: 0 0 15px 0;
			text-align: center;
			}
			/* ***************************
			       General
			**************************** */
			
			.inputtext {
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			border: 1px solid #aaa;
			padding: 7px;
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
			font-size: 13px;
			border-radius: 3px;
			behavior: url(/_pie/PIE.htc);
			}
			
			
			/* ***************************
			       Misc
			**************************** */
			
			.smalltxt { font-size: 11px; }
			
			span.bar {
			padding: 0 4px;
			color: #999;
			}
			
			.mtop3 { margin-top: 30px !important; }
			.mtop2 { margin-top: 20px !important; }
			.mtop15 { margin-top: 15px !important; }
			.mtop1 { margin-top: 10px !important; }
			.mtop05 { margin-top: 5px !important; }
			.mtop025 { margin-top: 5px !important; }
			.mtop0 { margin-top: 0 !important; }
			.mbottom3 { margin-bottom: 30px !important; }
			.mbottom2 { margin-bottom: 20px !important; }
			.mbottom15 { margin-bottom: 15px !important; }
			.mbottom1 { margin-bottom: 10px !important; }
			.mbottom075 { margin-bottom: 5px !important; }
			.mbottom05 { margin-bottom: 5px !important; }
			.mbottom025 { margin-bottom: 5px !important; }
			.mbottom0 { margin-bottom: 0 !important; }
			.mvert2 { margin: 20px 0 !important; }
			.mvert15 { margin-top: 15px !important; margin-bottom: 15px !important; }
			.mvert1 { margin-top: 10px !important; margin-bottom: 10px !important; }
			.mvert075 { margin-top: 10px !important; margin-bottom: 10px !important; }
			.mvert05 { margin-top: 5px !important; margin-bottom: 5px !important; }
			.mvert025 { margin-top: 5px !important; margin-bottom: 5px !important; }
			.mvert0 { margin-top: 0 !important; margin-bottom: 0 !important; }
			
			.aleft { text-align: left !important; }
			.acenter { text-align: center !important; }
			
			.highlight1 { background: #ffa;}
			
			
			.public-button {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-size: 13px;
			vertical-align: top;
			padding: 6px 14px 6px 14px;
			border: 1px solid #a2a2a2;
			color: #444;
			cursor: pointer;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			background: -webkit-linear-gradient(#fff, #e5e5e5);
			background: -moz-linear-gradient(#fff, #e5e5e5);
			background: -ms-linear-gradient(#fff, #e5e5e5);
			background: -o-linear-gradient(#fff, #e5e5e5);
			background: linear-gradient(#fff, #e5e5e5);
			-pie-background: linear-gradient(#fff, #e5e5e5);
			position: relative;
			behavior: url(/_pie/PIE.htc);
			}
			.public-button:hover {
			background: #e5e5e5;
			transition: background 0.05s linear;
			}
			.public-button:active {
			padding: 7px 14px 5px 14px;
			background: -webkit-linear-gradient(#e5e5e5, #fff);
			background: -moz-linear-gradient(#e5e5e5, #fff);
			background: -ms-linear-gradient(#e5e5e5, #fff);
			background: -o-linear-gradient(#e5e5e5, #fff);
			background: linear-gradient(#e5e5e5, #fff);
			-pie-background: linear-gradient(#e5e5e5, #fff);
			}
			
			#header { background: #eeede7; border-bottom: 2px solid #d8d5c7; }
			#top { background: #000000; border-bottom: 4px solid #d8d5c7; }
			body { background: #f7f6f3; }
			.footer-home { background: #eeede7 !important; border-top: 2px solid #d8d5c7; }
			
			div.internal, body.small { background: #000000; }
			div.internal #top { background: linear-gradient(#f2f1ec, #eeede7); border: 1px solid #e0ddcd; }
			div.internal #content { background: #f7f6f3; border: 1px solid #e1dfd4; border-top: none; }
			#footer { background: #000000; }
			
			div.separator { border-top: 1px solid #e1dfd4; }
			.call { border-top: 1px solid #e1dfd4; }
			div.separator-label span { background: #f7f6f3; }
			
			body.small #container { background: #f7f6f3; border: 1px solid #e1dfd4; }
	    
   	 	</style>	
	</head>	
    <body class="small login">
	<div id="header" style="color:white">
		<div class="wrapper">
			<h1>LOGIN PAGE</h1>
		</div>
	</div>
    <div id="container">
    	<div id="content">
    		<div class="wrapper">
				<h:form id="mainForm">
					<p:panelGrid style="margin-left: auto;margin-right: auto;" styleClass="login">
						<p:row>
							<p:column>
								<p class="mtop0 mbottom025"><strong><h:outputLabel for="username" value="Username"></h:outputLabel></strong></p>
								<p:inputText id="username" tabindex="1" styleClass="inputtext" value="#{data.username}"/>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p class="mtop0 mbottom025"><strong><h:outputLabel for="password" value="Password"></h:outputLabel></strong></p>
								<p:password id="password" tabindex="2" styleClass="inputtext" value="#{data.password}"/>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p:commandButton value="Login" style="padding-top: 10px;" styleClass="public-button" actionListener="#{logic.onLoginSubmit}"></p:commandButton>
							</p:column>
						</p:row>
					</p:panelGrid>
				</h:form>
		</div> <!-- wrapper -->
		</div> <!-- content -->
	</div> <!-- container -->

   	<div id="footer">
		<div class="wrapper">
			<p id="copyright">
				Copyright &copy; 2014. AxonActive training course TeamB. All rights reserved.
			</p>
		</div>
	</div>
		
    </body>
</html>